<!-- 地图视图 -->

<template>
  <div
    ref="view"
    class="MapPoint-MapView"
    v-bind="markViewProps"
    @mousedown="mouseDown"
    @mouseup="mouseUp"
    @mousemove="mouseMove"
    @mouseleave="mouseLeave"
    @mousewheel="mouseWheel"
    @contextmenu.prevent="CORE.doNothing"
  >
    <ViewBackground @loaded="toLoaded">
      <MarkPoint v-if="!map_GETTER.isLine && markObj" :obj="markObj" />
      <ViewPoint
        v-for="item in mapPoint"
        :key="item.id"
        :obj="item"
        :hide="map_one.id === item.id || !map_readyList"
        @edit="mouseMove"
      />

      <MarkLine v-if="map_GETTER.isLine && markObj" :obj="markObj" />
      <ViewLine
        v-for="item in mapLine"
        :key="item.id"
        :obj="item"
        :hide="map_one.id === item.id || !map_readySelect"
        @edit="mouseMove"
      />
    </ViewBackground>

    <ViewName />

    <ViewRuler />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MapView from '@admin/views/Secure/mixMap/MapView'

// ============================== 导出组件 ============================== //

export default CORE.extend(MapView, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MapView',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(MapView.components, require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...MapView.computed,

    /**
     * 标记视图的属性
     */
    markViewProps() {
      const { map_one, viewProps } = this
      const mark = map_one.deviceId ? ' Secure-MapView-inMark' : ''
      return { class: `${viewProps.class}${mark}` }
    },

    /**
     * 标记的对象
     */
    markObj() {
      const { map_one } = this
      if (!map_one.deviceId) return null

      const trans = (key) => map_one[key] && map_one[key] !== '0' ? +map_one[key].slice(0, -1) : null // 只有 % 前面的浮点数字
      const left = trans('longitude')
      const top = trans('latitude')
      const site = JSON.parse(map_one.siteJson)
      return { ...map_one, left, top, site }
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    ...MapView.watch,

    /**
     * 监听点位列表就绪
     */
    map_readyList(ready) {
      ready && this.map_setOne()
    },

    /**
     * 监听周界列表就绪
     */
    map_readySelect(ready) {
      ready && this.map_setOne()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...MapView.methods,

    /**
     * 鼠标按下
     */
    mouseDown({ srcElement, button, clientX, clientY }) {
      if (this.checkNoMove(srcElement)) return

      if (this.map_one.deviceId) return
      if (button === 0) this.transStart(clientX, clientY)
    },

    /**
     * 鼠标弹起
     */
    mouseUp({ button }) {
      if (this.map_one.deviceId) {
        button === 0 && this.toSubmit()
        button === 2 && this.map_setOne()
      } else {
        button === 0 && this.transStop()
        button === 1 && this.initTransScale()
        button === 2 && this.rotateStop()
      }
    },

    /**
     * 鼠标移动
     */
    mouseMove({ clientX, clientY }) {
      if (this.map_one.deviceId) {
        this.changePoint(clientX, clientY)
      } else {
        this.inTrans && this.transDoing(clientX, clientY)
        this.inRotate && this.rotateDoing(clientX, clientY)
      }
    },

    /**
     * 鼠标离开
     */
    mouseLeave() {
      const { map_one, map_GETTER } = this
      if (!map_one.deviceId) return

      if (map_GETTER.isLine) {
        if (map_one.step === 1) { // 当前为第一步
          map_one.siteJson = '{}'
        } else { // 当前为第二步
          const { x1, y1 } = JSON.parse(map_one.siteJson)
          map_one.siteJson = JSON.stringify({ x1, y1, x2: null, y2: null })
        }
      } else {
        Object.assign(map_one, { longitude: '', latitude: '' })
      }
    },

    /**
     * 改变点位
     */
    changePoint(clientX, clientY) {
      const { map_one, map_GETTER } = this
      const { map } = this.$children[0].$refs
      const { width, height, top, left } = map.getBoundingClientRect()

      const x = clientX < left || clientX > left + width ? '' : `${(clientX - left) * 100 / width}%`
      const y = clientY < top || clientY > top + height ? '' : `${(clientY - top) * 100 / height}%`

      if (map_GETTER.isLine) {
        const { x1, y1 } = JSON.parse(map_one.siteJson)
        if (map_one.step === 1) map_one.siteJson = JSON.stringify({ x1: x, y1: y, x2: null, y2: null })
        if (map_one.step === 2) map_one.siteJson = JSON.stringify({ x1, y1, x2: x, y2: y })
      } else {
        Object.assign(map_one, { longitude: x, latitude: y })
      }
    },

    /**
     * 提交点位
     */
    toSubmit() {
      const { map_one, map_GETTER } = this

      if (map_GETTER.isLine) {
        if (map_one.step === 1) { // 当前为第一步
          map_one.step = 2
        } else { // 当前为第二步
          map_one.id ? this.map_startEdit() : this.map_startAdd()
        }
      } else {
        if (map_one.longitude && map_one.latitude) {
          map_one.id ? this.map_startEdit() : this.map_startAdd()
        }
      }
    },
  },
})
</script>

<style lang="scss">
@import './index.scss';
</style>
